<template>
  <el-container>
    <el-header style="padding: 20px 20px 0 20px;height: initial">
      <el-form label-width="0" inline>
        <el-form-item label="">
          <el-input
            v-model="searchForm.name"
            placeholder="菜单名称(模糊匹配)"
          />
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="searchForm.path"
            placeholder="菜单路径(模糊匹配)"
          />
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="searchForm.redirectPath"
            placeholder="重定向路径(模糊匹配)"
          />

        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="searchForm.componentPath"
            placeholder="前端文件路径(模糊匹配)"
          />

        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="searchForm.componentName"
            placeholder="组件名称(模糊匹配)"
          />
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="searchForm.iconId" placeholder="选择图标">
            <el-option
              v-for="item in iconOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button
            icon="el-icon-zoom-in"
            type="primary"
            plain
            @click="search"
          >查询</el-button>
          <el-button
            icon="el-icon-refresh"
            type="info"
            plain
            @click="reset"
          >清空</el-button>
          <el-button
            icon="el-icon-plus"
            type="primary"
            plain
            @click="add"
          >新增</el-button>

          <el-button
            icon="el-icon-close"
            type="danger"
            plain
            @click="deletes()"
          >批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        v-loading.fullscreen.lock="loading"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="45"
          show-overflow-tooltip
        />
        <el-table-column
          prop="id"
          label="菜单ID"
          show-overflow-tooltip
        />
        <el-table-column
          prop="parentId"
          label="菜单父级ID"
          show-overflow-tooltip
        />
        <el-table-column
          prop="name"
          label="菜单名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="path"
          label="菜单路径"
          show-overflow-tooltip
        />
        <el-table-column
          prop="redirectPath"
          label="重定向"
          show-overflow-tooltip
        />
        <el-table-column
          prop="componentName"
          label="组件注册名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="iconUrl"
          label="菜单图标"
          show-overflow-tooltip
        />
        <el-table-column
          prop="sequence"
          label="排序"
          show-overflow-tooltip
        />
        <el-table-column label="操作" fixed="right" width="150px">
          <template slot-scope="scope">
            <div class="settings">
              <el-button
                type="warning"
                size="mini"
                plain
                @click="edit(scope.row)"
              >编辑</el-button>
              <el-button
                type="danger"
                size="mini"
                plain
                @click="deletes([scope.row[deleteKey]])"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="handleChangePageSize"
        @current-change="handleChangePageNo"
      />
    </el-footer>

    <el-dialog
      ref="select"
      title="菜单列表"
      width="600px"
      :visible.sync="dialogValue"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        v-if="dialogValue"
        ref="ruleForm"
        style="margin-right: 20px"
        :model="ruleForm"
        :rules="rules"
        status-icon
        label-width="120px"
      >
        <el-form-item label="菜单名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="菜单路径" prop="path">
          <el-input
            v-model="ruleForm.path"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="重定向" prop="redirectPath">
          <el-input
            v-model="ruleForm.redirectPath"
            type="text"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item
          label="组件注册路径"
          prop="componentPath"
        >
          <el-input
            v-model="ruleForm.componentPath"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="组件注册名称"
          prop="componentName"
        >
          <el-input
            v-model="ruleForm.componentName"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="图标url" prop="iconId">
          <el-select v-model="ruleForm.iconId" placeholder="选择图标">
            <el-option
              v-for="item in iconOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sequence">
          <el-input
            v-model.number="ruleForm.sequence"
            type="number"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="父级菜单" prop="parentId">
          <el-select v-model="ruleForm.parentId" placeholder="选择菜单">
            <el-option
              v-for="item in parentMenus"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          @click="save"
        >确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<style lang="less" scoped>
</style>
<script>
import { menu_request, icon_request } from '@/api/permission'
import curd from '@/mixins/curd'
export default {
  name: 'Menu',
  mixins: [curd],
  data() {
    return {
      request: menu_request,
      searchForm: {
        name: '',
        path: '',
        redirectPath: '',
        componentPath: '',
        componentName: '',
        iconId: ''
      },
      iconOptions: [],
      ruleForm: {
        id: undefined,
        parentId: '',
        name: '',
        path: '',
        redirectPath: '',
        componentPath: '',
        componentName: '',
        iconId: '',
        sequence: ''
      },
      reseForm: {
        id: undefined,
        parentId: '',
        name: '',
        path: '',
        redirectPath: '',
        componentPath: '',
        componentName: '',
        iconId: '',
        sequence: ''
      },

      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        component: [
          { required: true, message: '请输入组件注册名称', trigger: 'blur' }
        ]
      },

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      parentMenus: []
    }
  },
  created() {
    this.search()
    this.getIconList()
  },
  methods: {
    getIconList() {
      icon_request.list().then(res => {
        console.log('res', res)
        this.iconOptions = res.list
      })
    },
    getParentMenuList() {
      this.request.page({ pageNum: 1, pageSize: 99999 }).then(res => {
        this.parentMenus = res.list
      })
    },
    add() {
      this.ruleForm = { ...this.reseForm }
      this.getParentMenuList()
      this.dialogValue = true
    },
    edit(rowItem) {
      this.getParentMenuList()
      for (const key in this.ruleForm) {
        this.ruleForm[key] = rowItem[key]
      }
      this.ruleForm.id = rowItem.id
      this.dialogValue = true
    },
    handleChecked() {}
  }
}
</script>
